<%@ Language=VBScript %>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<HEAD>
<TITLE></TITLE>
<STYLE>
v\:* {behavior:url(#default#VML);}
}

.Box
{
	border:outset thin navy;
	position:absolute;
	text-align:center;
	width:100px;
	height:100px;
	cursor: hand;
	color:maroon;
}

</STYLE>
<SCRIPT LANGUAGE=javascript>
var sDragItem = "";
var iClickOffsetX = 0;
var iClickOffsetY = 0;

function OnLoad(){
	document.onmousemove=mmove;
	document.onmouseup=mup;
	DrawConnections();
}

function mmove(){
	var e = document.getElementById(sDragItem);
	if (e==null)return;
	
	e.style.top = event.y-iClickOffsetY;
	e.style.left = event.x-iClickOffsetX;
}

function mup(){
	sDragItem = "";
	DrawConnections();
}

function DragItem(sItem){
	iClickOffsetX = event.offsetX;
	iClickOffsetY = event.offsetY;
	
	idOutput.innerHTML = "";
	sDragItem=sItem;
}

function Box(id){
	var e = document.getElementById(id);
	if (e == null) return;
	
    var x = 0
    var y = 0;
    for(var p=e; p&&p.tagName!='BODY'; p=p.offsetParent){
      x += p.offsetLeft;
      y += p.offsetTop;
    }

	var w = e.offsetWidth;
	var h = e.offsetHeight;
	this.w = w;
	this.h = h;
    this.x = x;
    this.y = y;
	
	//clock wise scheme
	//1_2
	//4_3

	//1) top-left
    this.x1 = x;
    this.y1 = y;
    
    //1_2) top-left to top-right midpoint
    this.x1_2 = x+(w/2);
    this.y1_2 = y;
    
    //2) top-right
    this.x2 = x+w;
    this.y2 = y;
    
	//2_3) top-right - bottom-right midpoint
    this.x2_3 = x+w;
    this.y2_3 = y+(h/2);
    
	//3) bottom-right
    this.x3 = x+w;
    this.y3 = y+h;
    
    //3_4) bottom-right to bottom-left midpoint
    this.x3_4 = x+(w/2);
    this.y3_4 = y+h;
    
    //4) bottom-left
    this.x4 = x;
    this.y4 = y+h;
    
    //4_1) bottom-left to top-left midpoint
    this.x4_1 = x;
    this.y4_1 = y+(h/2);
    
}

function Connect(id,sId1,sId2){
	//debugger;
	
	var oBox1 = new Box(sId1);
	var oBox2 = new Box(sId2);
	var iHandle = 10;
	
	if (oBox1.x1 > oBox2.x2){
		//box 1 is right of box 2
		DrawLine("",oBox1.x4_1,oBox1.y4_1,oBox1.x4_1-iHandle,oBox1.y4_1);
		DrawLine("",oBox2.x2_3,oBox2.y2_3,oBox2.x2_3+iHandle,oBox2.y2_3);
		DrawLine(id,oBox1.x4_1-iHandle,oBox1.y4_1,oBox2.x2_3+iHandle,oBox2.y2_3);		
	}else if (oBox1.x2 < oBox2.x1){
		//box 1 is left of box 2
		DrawLine("",oBox1.x2_3,oBox1.y2_3,oBox1.x2_3+iHandle,oBox1.y2_3);
		DrawLine("",oBox2.x4_1,oBox2.y4_1,oBox2.x4_1-iHandle,oBox2.y4_1);
		DrawLine(id,oBox1.x2_3+iHandle,oBox1.y2_3,oBox2.x4_1-iHandle,oBox2.y4_1);
		
	}else if (oBox1.y1 > oBox2.y3){
		//box 1 is at the bottom of box 2
		DrawLine("",oBox1.x1_2,oBox1.y1_2,oBox1.x1_2,oBox1.y1_2-iHandle);
		DrawLine("",oBox2.x3_4,oBox2.y3_4,oBox2.x3_4,oBox2.y3_4+iHandle);
		DrawLine(id,oBox1.x1_2,oBox1.y1_2-iHandle,oBox2.x3_4,oBox2.y3_4+iHandle);
		
	}else if (oBox1.y3 < oBox2.y1){
		//box 1 is at the top of box 2
		DrawLine("",oBox1.x3_4,oBox1.y3_4,oBox1.x3_4,oBox1.y3_4+iHandle);
		DrawLine("",oBox2.x1_2,oBox2.y1_2,oBox2.x1_2,oBox2.y1_2-iHandle);
		DrawLine(id,oBox1.x3_4,oBox1.y3_4+iHandle,oBox2.x1_2,oBox2.y1_2-iHandle);
	}else{
		//alert("condition not met")
	}

}

function LineOver(id){
	var e = document.getElementById("line" + id);
	e.strokecolor = "red";
}
function LineOut(id){
	var e = document.getElementById("line" + id);
	e.strokecolor = "gray";
}
function LineClick(id){
	alert(id)
}

function DrawLine(id,x1,y1,x2,y2){
	var f=document.createElement('v:line');
	if (id!=""){
		var sScript = 'OnMouseOver="LineOver('+id+')" OnMouseOut="LineOut('+id+')"  OnClick="LineClick('+id+')"';
	}else{
		var sScript = '';
	}
	
	var f=document.createElement('<v:line ' + sScript + '>');
	var s=document.createElement('v:stroke');
	s.endcap="Round";
	f.appendChild(s);
	f.id="line" + id;
	f.strokecolor = "gray";
	f.fillcolor="red";
	f.strokeweight = '3px';
	f.style.position = 'absolute';
	f.style.cursor = 'hand';
	f.zIndex = 1;
	f.from = x1+","+y1;
	f.to = x2+","+y2;
	idOutput.appendChild(f);	
}

function DrawOval(x,y){
	var w=document.createElement('v:oval');
	w.style.position = 'absolute';
	w.zIndex = 1;
	w.fillcolor="white";
	w.strokecolor="green";
	w.strokeweight = 2;
	w.style.width = 6;
	w.style.height = 6;
	w.style.left = x-(6/2);
	w.style.top = y-(6/2);
	idOutput.appendChild(w);
}

function DrawConnections(){
	idOutput.innerHTML = "";
	
	var oConnections = new Array();
	oConnections[0] = Array(1,"Test1","Test2")
	oConnections[1] = Array(2,"Test1","Test4")
	oConnections[2] = Array(3,"Test2","Test3")
	oConnections[3] = Array(4,"Test1","Test5")

	for (var i=0;i<oConnections.length;i++){
		Connect(oConnections[i][0],oConnections[i][1],oConnections[i][2]);
	} 

}
</SCRIPT>

<BODY onload="OnLoad()">

<div id=idOutput style="position:absolute; top:0px; left:0px;"></div>

<div id=Test1 onmousedown="DragItem('Test1')" unselectable="on" style="top:200px;left:300px;" class=Box>
	Person 1
        <img src="anonym.jpg">
</div>

<div id=Test2 onmousedown="DragItem('Test2')" unselectable="on" style="top:10px;left:200px;" class=Box>
	Person 2
        <img src="anonym.jpg">
</div>

<div id=Test3 onmousedown="DragItem('Test3')" unselectable="on" style="top:150px;left:50px;" class=Box>
	Person 3
        <img src="anonym.jpg">
</div>

<div id=Test4 onmousedown="DragItem('Test4')" unselectable="on" style="top:300px;left:10px;" class=Box>
	Person 4
        <img src="anonym.jpg">
</div>

<div id=Test5 onmousedown="DragItem('Test5')" unselectable="on" style="top:350px;left:300px;" class=Box>
	Person 5
        <img src="anonym.jpg">
</div>

</BODY>
</HTML>
